"use strict"
// import * as THREE from './three'
const World = {
    MAX_X : 120,                // 世界的尺寸
    MAX_Y : 120,
    MAX_Z : 120,
}

const Light = {
    Angle_x : Math.PI / 2,
    Angle_y : 0,
    Angle_z : Math.PI / 2,
    Pos_x : 0,
    Pos_y : 50,
    Pos_z : 0,
}

// 高度位置
const electron_beam_height = 70;
const gun_anode_height = 50;
const ring1_height = 40;
const ring2_height = 30;
const direct_camera_height = 20;

// 内径尺寸
const gun_anode_size = 3;
const ring1_size = 5;
const ring2_size = 5;

// 外径尺寸
const gun_anode_outer_size = 50;
const ring1_outer_size = 50;
const ring2_outer_size = 50;



// 初始化相机和页面canvas元素，开启投影
const scene = new THREE.Scene();
const camera_global = new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,0.1,1000);
const renderer_global = new THREE.WebGLRenderer();
renderer_global.shadowMap.enabled = true;
renderer_global.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
camera_global.position.set(World.MAX_X*0.9,World.MAX_Y/2,World.MAX_Z*0.9);
camera_global.lookAt(0,World.MAX_Y/4,0);
renderer_global.setSize(window.innerWidth/2,window.innerHeight/2);
var newDiv = document.createElement("div");
newDiv.style = "border-bottom : solid red"
newDiv.appendChild(renderer_global.domElement);
document.getElementById("drawings").appendChild(newDiv);


// 直接看下方的光点，对应从电子枪内部向下看荧光屏图像
const camera_direct = new THREE.PerspectiveCamera(120,window.innerWidth / window.innerHeight,0.1,1000);
const renderer_direct = new THREE.WebGLRenderer();

renderer_direct.shadowMap.enabled = true;
renderer_direct.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
camera_direct.position.set(0,direct_camera_height,0);
camera_direct.lookAt(0,0,0)
renderer_direct.setSize(window.innerWidth/2,window.innerHeight/2);
document.getElementById("drawings").appendChild(renderer_direct.domElement);


// 辅助坐标架
const axesHelper = new THREE.AxesHelper( World.MAX_X );
scene.add( axesHelper );

// 环境光
var amlight = new THREE.AmbientLight(0x003300);
scene.add(amlight);


// light source
const electron_beam = new THREE.SpotLight( 0xffffff );  // 点光源模型
// 电子束被阳极孔和肖特基极孔遮挡。角度会跟着变化
electron_beam.castShadow = true; // default false
scene.add( electron_beam );
// 需要控制旋转方向

// 需要一个可以跟着旋转的阳极孔。旋转中心可以调节。暂定就在光源和孔的连线中央高度处
// 电子束的照射目标
const targetObject = new THREE.Object3D();
scene.add(targetObject);
targetObject.position.set(0,0,0);
electron_beam.target = targetObject;
electron_beam.position.y = electron_beam_height;

// 开启投影效果
electron_beam.shadow.mapSize.width = 512; // default
electron_beam.shadow.mapSize.height = 512; // default
electron_beam.shadow.camera.near = 0.5; // default
electron_beam.shadow.camera.far = 500; // default
electron_beam.shadow.focus = 1; // default

// 用一个球来表征电子枪灯丝的位置
const sphereGeometry = new THREE.SphereGeometry( 4);
const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff00ff } );
const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
sphere.rotateX(Math.PI);
sphere.position.y = 70;
scene.add( sphere );

// 接收阴影的平面
const planeGeometry = new THREE.PlaneGeometry( 300, 300 );
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.rotateY(Math.PI/2);
plane.rotateX(Math.PI/2*3);
plane.position.y = -30;
plane.receiveShadow = true;
scene.add( plane );

// 第一个光阑
const geometry = new THREE.RingGeometry( ring1_size, ring1_outer_size, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
const mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true; //default is false
mesh.receiveShadow = false; //default
mesh.rotateX(Math.PI / 2);
mesh.position.y = ring1_height;
scene.add( mesh );

// 第二个光阑
const geometry2 = new THREE.RingGeometry( ring2_size, ring2_outer_size, 32 );
const material2 = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
const mesh2 = new THREE.Mesh( geometry2, material2 );
mesh2.castShadow = true; //default is false
mesh2.receiveShadow = false; //default
mesh2.rotateX(Math.PI / 2);
mesh2.position.y = ring2_height;
scene.add( mesh2 );

// 阳极光阑（和电子枪相对固定）
const gun_anode_geo = new THREE.RingGeometry( gun_anode_size, gun_anode_outer_size, 32 );
const gun_anode_mater = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
const gun_anode_mesh = new THREE.Mesh( gun_anode_geo, gun_anode_mater );
gun_anode_mesh.castShadow = true; //default is false
gun_anode_mesh.receiveShadow = false; //default
gun_anode_mesh.rotateX(Math.PI / 2);
gun_anode_mesh.position.y = gun_anode_height;
scene.add( gun_anode_mesh );

// 旋转电子枪
function rotate_gun()
{
    var posi_y = electron_beam_height;
    var dis = electron_beam_height - gun_anode_height;
    var phi_x = Math.PI / 2 / 20 * Number(document.getElementById("light_rx").value);
    var phi_z = Math.PI / 2 / 20 * Number(document.getElementById("light_rz").value);
    var newx = Number(document.getElementById("light_x").value);
    var newz = Number(document.getElementById("light_z").value);
    
    gun_anode_mesh.position.y = posi_y - Math.cos(phi_x) * dis * Math.cos(phi_z);
    gun_anode_mesh.position.x = Math.sin(phi_x) * dis +newx;
    gun_anode_mesh.position.z = - Math.cos(phi_x) * dis * Math.sin(phi_z) + newz;
    gun_anode_mesh.rotation.y = (phi_x);
    gun_anode_mesh.rotation.x = (phi_z) + Math.PI/2;
}


const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(1,0,1);
scene.add( directionalLight );
directionalLight.intensity = 10;

// 移动电子枪
function light_move()
{
    var posi_y = electron_beam_height;
    var dis = electron_beam_height - gun_anode_height;
    var phi_x = Math.PI / 2 / 20 * Number(document.getElementById("light_rx").value);
    var phi_z = Math.PI / 2 / 20 * Number(document.getElementById("light_rz").value);
    var newx = Number(document.getElementById("light_x").value);
    var newz = Number(document.getElementById("light_z").value);
    gun_anode_mesh.position.y = posi_y - Math.cos(phi_x) * dis * Math.cos(phi_z);
    gun_anode_mesh.position.x = Math.sin(phi_x) * dis +newx;
    gun_anode_mesh.position.z = - Math.cos(phi_x) * dis * Math.sin(phi_z) + newz;
    electron_beam.position.x = Number(document.getElementById("light_x").value);
    electron_beam.position.z = Number(document.getElementById("light_z").value);
    sphere.position.x = electron_beam.position.x;
    sphere.position.y = electron_beam.position.y;
    sphere.position.z = electron_beam.position.z;
    sphere.position.y +=5;
}

sphere.position.x = electron_beam.position.x;
sphere.position.y = electron_beam.position.y;
sphere.position.z = electron_beam.position.z;
sphere.position.y +=5;

// 反复绘制
function draw() {
    renderer_global.render(scene,camera_global);
    renderer_direct.render(scene,camera_direct);
    requestAnimationFrame(draw);
    rotate_gun();
    light_move();
}

draw();

